<template>
  <div class="riskTrend-root">
    <formTitleVue
      title="风险趋势统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"

    />
    <myBar domId="riskManagement-riskTrend-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myBar from '@/components/Echarts/myBar.vue';
import { time_select_optios } from '@/utils/global.js';

import { riskHazardCountStatistics
} from '@/api/risk/riskHazard'


export default {
  name: "riskTrend",
  components: {
    formTitleVue,myBar,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],

        }
      ],
      dateTypeObject:{ "近一月":"03", "近半年":"02", "近一年":"02"},
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        
      },
      searChForm: {
        startTime: '',
        endTime: '',
        areaCode:'',
        placeType:'',
        dateType:''
      },
    };
  },
  watch: {

  },
  mounted() {
    this.selectChange("近一月");

  },
  methods: {
    selectChange(item) {

      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.searChForm.dateType = this.dateTypeObject[item]
      this.getData();
    },
    getData(){

      //this.chartsData.yData = [10, 20, 30, 40, 50, 60, 70];

      this.loading = true
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);

      riskHazardCountStatistics(this.searChForm).then((res) => {
        this.chartsData.xData = res.data.xAxle
        this.chartsData.yData = res.data.data.map(item=>{
          return {
            //name:item.name,
            data:item.report
          }
        })
        this.loading = false
        // this.draw(res.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.riskTrend-root {
}
</style>
